<template>
	<view class="container">
		<view class="screenContainer" @click="openData()">
			<text>{{screen}}</text>
			<image src="../../../static/icon/xiala.png" mode=""></image>
		</view>
		<view class="month" v-if="month">
			{{month}}
		</view>
		<view v-if="list.length===0">
			<luanqing-empty :show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty>
		</view>
		<view class="list" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="pic" >
					<image v-if="item.pm===0" :src="item.image" mode=""></image>
					<image v-else src="../../../static/icon/yue.png" mode=""></image>
				</view>
				<view class="intro">
					<view class="title">
						{{item.name}}
					</view>
					<view class="time">
						{{item.time}}
					</view>
				</view>
				<view class="num">
					<text v-if="item.pm===0" class="jian">-{{item.money}}</text>
					<text v-else class="jia">+{{item.money}}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="dataPopup" type="bottom">
			<view class="dataContainer">
				<view class="wancheng" @click="closeData()">
					完成
				</view>
				<picker-view @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="dataItem" v-for="(item,index) in years" :key="index">{{item}}{{item==='全部'?"":'年'}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="dataItem" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			const date = new Date();
			const year = date.getFullYear();
			let month = date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
			const years = []
			years.push('全部');
			for (let i = year; i > (year-10); i--) {
				years.push(i)
			}
			return{
				screen:"全部",
				token:"",
				list:[],
				month:'',
				months:[1,2,3,4,5,6,7,8,9,10,11,12],
				years:years,
				page: 1,
				pagesize: 20,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
			}
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getData()
			}
		},
		created() {
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth?redirect=../my/wallet/records'
					});
				}
			});
		},
		methods:{
			openData(){
				this.$refs.dataPopup.open();
			},
			closeData(){
				this.$refs.dataPopup.close();
				this.list = [];
				this.page = 1;
				this.getData();
			},
			bindChange(e) {
				let year_index = e.detail.value[0];
				let month_index = e.detail.value[1];
				let year =this.years[year_index];
				this.month = this.months[month_index]>9?this.months[month_index]:'0'+this.months[month_index]
				if(year==="全部"){
					this.screen = '全部';
					this.month = "";
				}else{
					this.screen = year+'-'+this.month;
				}
				
			},
			getData() {
				let param = {
					"token": this.token,
					"page":this.page,
					"pageSize":this.pagesize
				}
				if(this.screen!=="全部"){
					param.date = this.screen;
				}
				uni.request({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/mine/index/moneyRecord',
					data: param,
					method: 'GET',
					success: res => {
						console.log(res)
						uni.hideLoading();
						if (res.data.code == 1) {
							if (res.data.data.length>0) {
								this.list = this.list.concat(res.data.data)
								if (res.data.length < this.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.isLoadMore = true
									this.loadStatus = 'nomore'
								} else {
									this.isLoadMore = false
								}
							} else {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							}
						} else { //接口请求失败的处理
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							this.isLoadMore = false
							if (this.page > 1) {
								this.page -= 1
							}
						}
						
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 20rpx 40rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		overflow: hidden;
	}
	.screenContainer{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		text{
			font-size: 15px;
			color: #666666;
			line-height: 15px;
		}
		image{
			width: 8px;
			height: 8px;
			margin-left: 6px;
		}
	}
	.list{
		margin-top: 28rpx;
	}
	.item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
		width: 670rpx;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8px;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		.pic{
			width: 60px;
			height: 60px;
			border-radius: 5px;
			overflow: hidden;
			margin-right: 20rpx;
			image{
				width: 60px;
				height: 60px;
				border-radius: 5px;
			}
		}
		.intro{
			width: 366rpx;
		}
		.title{
			font-size: 15px;
			color: #333333;
		}
		.time{
			font-size: 13px;
			color: #999999;
			margin-top: 10rpx;
		}
	}
	.month{
		font-size: 20px;
		font-weight: 500;
		color: #333333;
		margin-top: 36rpx;
	}
	.dataContainer {
		width: 750rpx;
		background-color: #FFFFFF;
		.picker-view {
		        width: 750rpx;
		        height: 350rpx;
		        margin-top: 20rpx;
		    }
		.dataItem {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		.wancheng{
			height: 56rpx;
			line-height: 56rpx;
			text-align: right;
			padding: 0 20px;
			box-sizing: border-box;
		}
	}
	.jian{
		color: #D35757;
	}
	.jia{
		color: #63A85F;
	}
</style>
